<template>
    <div class="main">
        <!--边框及标题  start-->
        <span class="logo" @click="click"><span class="logoimg"></span><span class="logoLine"></span><span class="logoText">{{title}}</span></span>
        <span class="tl jiao"></span>
        <span class="tr jiao"></span>
        <span class="br jiao"></span>
        <span class="bl jiao"></span>
        <span class="bian bianl"></span>
        <span class="bian bianr"></span>
        <span class="borderb borderbl"></span>
        <span class="borderb borderbr"></span>
        <span class="borders bordersl"></span>
        <span class="borders bordersr"></span>
        <span class="borders borderslt"></span>
        <span class="borders bordersrt"></span>
        <span class="bordert bordertl"></span>
        <span class="bordert bordertr"></span>
        <span class="box boxl"></span>
        <span class="box boxr"></span>
        <!--边框及标题  end-->

        <menubar></menubar>

        <screeenbody @changeTitle="changeTitle"></screeenbody>

    </div>
</template>

<script>
    var content = top.$('iframe[id="'+ getUrlParam('menuId') +'"]').get(0);
    //监听全屏状态变化
   /* if (top.addEventListener) {
        top.document.addEventListener('fullscreenchange', fullscreenchange);
        top.document.addEventListener('webkitfullscreenchange', fullscreenchange);
        top.document.addEventListener('mozfullscreenchange', fullscreenchange);
        top.document.addEventListener('MSFullscreenChange',fullscreenchange);
    }*/
    //全屏变化执行函数
    function fullscreenchange(){
        /*if (top.addEventListener) {
            top.document.removeEventListener('fullscreenchange', fullscreenchange);
            top.document.removeEventListener('webkitfullscreenchange', fullscreenchange);
            top.document.removeEventListener('mozfullscreenchange', fullscreenchange);
            top.document.removeEventListener('MSFullscreenChange',fullscreenchange);
        }
        top.$N.closeTabs();*/
    }

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if(r != null) return unescape(r[2]);
        return null; //返回参数值
    }
    //全屏
    function fullScreen(el) {
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
            wscript;

        if(typeof rfs != "undefined" && rfs) {
            rfs.call(el);
            return;
        }

        if(typeof window.ActiveXObject != "undefined") {
            wscript = new ActiveXObject("WScript.Shell");
            if(wscript) {
                wscript.SendKeys("{F11}");
            }
        }
    }
    //退出全屏
    function exitFullScreen(el) {
        var el= top.document,
            cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
            wscript;

        if (typeof cfs != "undefined" && cfs) {
            cfs.call(el);
            return;
        }

        if (typeof window.ActiveXObject != "undefined") {
            wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }

    import menubar from './menubar'
    import screeenbody from './screenbody'
    export default {
        name: "screenwrap",
        data(){
          return{
              title:''
          }
        },
        components: {
            menubar,screeenbody
        },
        methods:{
            changeTitle(title){
                this.title = title;
            },
            click(){
                fullScreen(content);
            }
        }
    }
</script>

<style lang="less" scoped>
    @borderColor:#2047a0;
    .main{
        position: relative;
        height: 100%;
       &>span{
           position: absolute;
           &.jiao{
               width: 90px;
               height: 82px;
               background: url("images/jiao.png") no-repeat;
           }
           &.tl{
               top: 31px;
               left: 18px;
           }
           &.tr{
               top: 31px;
               right: 18px;
               transform: rotateY(180deg);
           }
           &.bl{
               left: 17px;
               bottom: 16px;
               transform: rotateX(180deg);
           }
           &.br{
               right: 17px;
               bottom: 16px;
               transform: rotate(180deg);
           }
           &.bian{
               width: 14px;
               height: 241px;
               background: url("images/bian.png") no-repeat;
               &.bianl{
                   left: 10px;
                   bottom: 229px;
               }
               &.bianr{
                   right: 10px;
                   bottom: 229px;
                   transform: rotateY(180deg);
               }
           }
           &.borderb{
               width: 292px;
               height: 2px;
               background-color: @borderColor;
               bottom: 20px;
               &.borderbl{
                   left: 105px;
               }
               &.borderbr{
                   right: 105px;
               }
           }
           &.borders{
               width: 2px;
               background-color: @borderColor;
               bottom: 96px;
               height: 134px;
               &.bordersl{
                   left: 22px;
               }
               &.bordersr{
                   right: 22px;
               }
               &.borderslt{
                   left: 22px;
                   bottom: 468px;
                   height: calc(100% - 580px);
               }
               &.bordersrt{
                   right: 22px;
                   bottom: 468px;
                   height: calc(100% - 580px);
               }
           }
           &.bordert{
               background-color: @borderColor;
               height: 2px;
               top: 36px;
               width: calc(50% - 450px);
               &.bordertl{
                   left: 106px;
               }
               &.bordertr{
                   right: 106px;
               }
           }
           &.box{
               width: 10px;
               height: 50px;
               border: 2px solid @borderColor;
               top: 12px;
               &.boxl{
                   left: calc(50% - 344px);
               }
               &.boxr{
                   right: calc(50% - 344px);
               }
           }
           &.logo{
               width: 640px;
               height: 54px;
               top: 12px;
               line-height: 54px;
               color: #fff;
               font-size: 32px;
               left: calc(50% - 330px);
               text-align: center;
               .logoimg{
                   display: inline-block;
                   background: url("images/logo.png") no-repeat 0 14px;
                   width: 315px;
                   height: 54px;
                   vertical-align: middle;
               }
               .logoLine,.logoText{
                   vertical-align: middle;
               }
               .logoLine{
                   display: inline-block;
                   height: 3px;
                   width: 36px;
                   background-color: #fff;
                   margin: 0 6px;
               }
           }
        }
    }
</style>
